<!doctype html>
<html><head>
	<!-- Basic Page Needs --> 
        <meta charset="utf-8"> 
        <title>Appcorner - Single post</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net"> 


    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- SourceSansPro -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
        <!-- Icomoon -->
        <link href="css/icomoon.css" rel="stylesheet" />
        <!--  Font awesome 4-->
        <link href="css/font-awesome.css" rel="stylesheet" />
    
    <!-- Stylesheets -->
    	
        <!-- Bootstrap 3 -->
    	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Mobile navigation menu-->
        <link href="css/gozha-nav.css" rel="stylesheet" />

    <!-- Page specific Stylesheets-->
        <!-- Colorbox (popup) -->
        <link rel="stylesheet" href="css/colorbox.css">

        <!-- Custom -->
        <link href="css/base.css?v=1" rel="stylesheet" />
        <link href="css/style.css?v=1" rel="stylesheet" />
		
		<!-- Basic JavaScript-->
		<!-- Modernizr -->
		<script src="js/modernizr.custom.05768.js"></script> 
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>		
    <![endif]-->
 
</head>

<body class=''>
    <div class='wrapper'>
        <header class='header'>
            <div class='container'>
                <p class='call-number'>You can just call us <span>+1-888-555-5555</span></p>
                <!-- social icon -->
                <ul class='social-icon pull-right'>
                    <li><a href="#"><i class='icon-instagram'></i></a></li>
                    <li><a href="#"><i class='icon-dribbble'></i></a></li>
                    <li><a href="#"><i class='icon-tumblr'></i></a></li>
                    <li><a href="#"><i class='icon-linkedin'></i></a></li>
                    <li><a href="#"><i class='icon-pinterest'></i></a></li>
                    <li><a href="#"><i class='icon-googleplus'></i></a></li>
                    <li><a href="#"><i class='icon-facebook'></i></a></li>
                    <li><a href="#"><i class='icon-twitter'></i></a></li>
                </ul><!-- end of social icon list -->

                <div class='top-navigation'>
                  <div class="navigation-front">
                    <a href="index.html" class='logo'>AppCorner</a>
                    <div id="navigation-box">
                        <a href="#" id="navigation-toggle">
                            <span class="menu-icon"></span>
                        </a> 
                        <ul id="navigation" class="hover-link">
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Home'>Home</a>
                                <ul>
                                    <li><a href="homepage1.html">Revolution Slider</a></li>
                                    <li><a href="homepage2.html">OneByOne Slider</a></li>
                                    <li><a href="homepage3.html">BxSlider</a></li>
                                    <li><a href="homepage4.html">FlexSlider</a></li>
                                    <li><a href="full-width-slider.html">Full Width</a></li>
                                    <li><a href="index.html">Video Slider</a></li>

                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Pages'>Pages</a>
                                <ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="single-employee.html">Single employee</a></li>
                                    <li><a href="service.html">Services</a></li>
                                    <li><a href="single-service.html">Single service</a></li>
                                    <li><a href="price.html">Price</a></li>
                                    <li><a href="page-element.html">Page elements</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icon-font-1.html">Icons - Font awesome</a></li>
                                    <li><a href="icon-font-2.html">Icons - Icomoon</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="support.html">Support</a></li>
                                    <li><a href="coming-soon.html">Coming soon</a></li>
                                    <li><a href="404.html">404 error</a></li>

                                </ul>
                            </li>

                            <li class="visible-lg">
                               <span class="sub-nav-toggle plus"></span>
                               <a href="#" data-hover='Mega Menu'>Mega Menu</a>
                               <ul class="mega-menu">
                                  <li class="col-md-6">
                                    <div class="mega-menu-text">
                                        <h4>About Us</h4>
                                        <div class="image-wrap">
                                           <img alt='' src="http://placehold.it/420x420">
                                        </div>
                                        <div>
                                            <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. 
                                                <br>
                                                <br>
                                            Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>        
                                        </div>
                                      </div>
                                  </li>
                                  <li class="col-md-6">
                                    <div class="mega-menu-item">
                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Pages</h4></li>
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="single-employee.html">Single employee</a></li>
                                        <li><a href="service.html">Services</a></li>
                                        <li><a href="single-service.html">Single service</a></li>
                                        <li><a href="price.html">Price</a></li>
                                        <li><a href="page-element.html">Page elements</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="empty"><div></div></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icon-font-2.html">Icons</a></li>
                                        <li><a href="coming-soon.html">Coming soon</a></li>
                                        <li><a href="404.html">404 error</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="support.html">Support</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Gallery</h4></li>
                                        <li><a href="gallery-random.html">Random</a></li>
                                        <li><a href="gallery-three-columns.html">3 columns</a></li>
                                        <li><a href="gallery-two-columns.html">2 columns</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Blog</h4></li>
                                        <li><a href="blog-style-one.html">Style 1</a></li>
                                        <li><a href="blog-style-two.html">Style 2</a></li>
                                        <li><a href="blog-style-three.html">Style 3</a></li>
                                        <li><a href="single-post.html">Post</a></li>
                                        <li><a href="single-post-two.html">Post style 2</a></li>
                                      </ul>
                                      </div>
                                  </li>
                               </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="gallery-random.html" data-hover='Gallery'>Gallery</a>
                                <ul>
                                    <li><a href="gallery-random.html">Gallery random</a></li>
                                    <li><a href="gallery-three-columns.html">Gallery 3 columns</a></li>
                                    <li><a href="gallery-two-columns.html">Gallery 2 columns</a></li>
                                    <li><a href="gallery-three-columns-iso.html">Gallery 3 columns sorted</a></li>
                                    <li><a href="gallery-two-columns-iso.html">Gallery 2 columns sorted</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="blog-style-one.html" data-hover='Blog' class='active'>Blog</a>
                                <ul>
                                    <li><a href="blog-style-one.html">Blog style 1</a></li>
                                    <li><a href="blog-style-two.html">Blog style 2</a></li>
                                    <li><a href="blog-style-three.html">Blog style 3</a></li>
                                    <li><a href="blog-audio.html">Audio blog</a></li>
                                    <li><a href="blog-video.html">Video blog</a></li>
                                    <li><a href="single-post.html">Single post</a></li>
                                    <li><a href="single-post-two.html">Single post style 2</a></li>
                                </ul>
                            </li>

                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="shop-sidebar.html" data-hover='Shop'>Shop</a>
                                <ul>
                                    <li><a href="shop-sidebar.html">Shop with sidebar</a></li>
                                    <li><a href="shop-full.html">Shop fullwidth</a></li>
                                    <li><a href="single-product-sidebar.html">Single product sidebar</a></li>
                                    <li><a href="single-product-full.html">Single product fullwidth</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="shopping-cart.html">Shopping cart</a></li>
                                </ul>
                            </li>
                            
                            <li><a href="contact.html" data-hover='Contact'>Contact</a></li>
                        </ul>
                  </div>
                </div>
              </div>

                <div class='main-zone'>
                    <div class="corner"></div>
                    <div class='corner-line'></div>
                    
                   <div class='current-page'>
                      <hr class="top-devider" />
                        <h1>single post style 1</h1>
                        <ol class="breadcrumb">
                          <li><a href="index.html">home</a></li>
                          <li><a href="random-gallery.html">blog</a></li>
                          <li class="active">single post</li>
                        </ol>
                   </div>
                </div>
            </div>
        </header>

        <section class="container waypoint" data-animate-up="nav-strict" data-animate-down="nav-show">
            <div class="col-sm-8">
                <div class="single-post">
                    <div class="start-photo">
                        <img alt='' src="http://placehold.it/1140x580">
                    </div>

                    <h1 class="text-style">Vestibulum metus sem, ullamcorper in libero id. (h1)</h1>

                    <span class="post-date">Jun 27 <br> 2013</span>
                   
                    <ul class="acticle-about">
                        <li class="acticle-author">John Doe</li>
                        <li class="acticle-tags"><a href="#">app</a>, <a href="#">development</a>, <a href="#">webdesign</a></li>
                        <li class="acticle-comment">63 comments</li>
                    </ul>

                    <p>Fusce vel mauris vel nulla pellentesque egestas. In vestibulum risus nec nisi malesuada id viverra risus vulputate. Donec sit amet sem in turpis auctor mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis condimentum lorem posuere lorem rhoncus eget pulvinar erat sollicitudin. Nullam molestie pulvinar nulla, in gravida sem vehicula at.  Aliquam elementum commodo dignissim. <a href="#">Text link sample</a> condimentum urna non aliquet. </p>

                    <p>Nulla eget libero eros, vitae fringilla nisi. In hac habitasse platea dictumst.  <a href="#">Text link sample hover</a> viverra velit eu ante tristique adipiscing mollis sapien lobortis. Quisque gravida scelerisque vehicula. Curabitur volutpat odio vitae elit placerat tempor. Sed eu ante turpis, ut tristique risus.  </p>

                    <p>Phasellus tristique urna eget dui sollicitudin vel sagittis libero malesuada. Aenean id ligula odio. Mauris in nunc non orci accumsan vulputate laoreet id est. Cras id elit id urna dapibus bibendum. Donec vitae velit id diam eleifend imperdiet nec quis turpis. Vivamus augue magna, elementum et pretium et, rutrum eu ligula. Morbi vitae mi lectus, quis lobortis risus. Ut eget orci vel quam volutpat sollicitudin id eget mi. Vestibulum eleifend, orci sit amet pulvinar accumsan, orci est cursus enim, sit amet tempus ante felis sit amet metus.  </p>

                    <blockquote class='quote-first'>
                      <p> Duis condimentum lorem posuere lorem rhoncus eget pulvinar erat sollicitudin. Nullam molestie pulvinar nulla, in gravida sem vehicula at.</p>
                      <p class='author'>- John Doe</p>
                    </blockquote>

                    <p>Curabitur sodales eleifend nibh, sit amet egestas nisi posuere a. Vestibulum non mauris ac magna egestas semper vitae non erat. Fusce elementum neque interdum arcu dignissim eu tristique dui rhoncus. Cras non gravida purus. Suspendisse consectetur tortor in arcu auctor suscipit.  Nam iaculis eros in justo convallis non fringilla risus blandit. In tempor diam id leo vulputate elementum. Donec sed lorem felis. </p>
                    

                    <h2 class="text-style">Proin gravida dapibus metus, et pretium lorem accumsan suscipit. (h2)</h2>

                    <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>

                    <ol> 
                        <li><span>Quisque ac porttitor massa.</span></li>
                        <li><span>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</span></li>
                        <li><span>In eros sem, malesuada ut dictum eget, volutpat at sem.</span> </li>
                        <li><span>Pellentesque porttitor suscipit laoreet.</span></li>
                    </ol>

                    <p>Integer sit amet tortor nunc. Nullam mi nisi, placerat non semper at, pretium eget urna. Integer ut justo ligula, ut mollis leo. Nullam ultricies ullamcorper mi, id hendrerit est pulvinar id. Maecenas quis sem velit. Quisque commodo ligula at est convallis sed condimentum justo lacinia. </p>
                    
                    <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>

                    <h3 class="text-style">Integer ac mi ac ipsum tincidunt vehicula ac ac neque.  (h3)</h3>
                    
                    <div class="img-text pull-right"><img alt='' src="http://placehold.it/210x210"></div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie luctus nulla sed feugiat. Vivamus vitae tortor est, eu mollis elit. Morbi euismod mauris sit amet enim euismod condimentum. Curabitur viverra vulputate nunc, eu adipiscing libero sagittis nec. </p>

                    <p>Duis aliquam elementum metus, a cursus neque lacinia sit amet. Fusce leo lacus, lobortis nec suscipit in, ultrices rutrum libero. Nam dapibus dui vel augue ullamcorper ut vehicula metus aliquet. Nulla suscipit interdum massa, accumsan tempus diam tristique ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie luctus nulla sed feugiat. 
                    Vivamus vitae tortor est, eu mollis elit. Morbi euismod mauris sit amet enim euismod condimentum. Curabitur viverra vulputate nunc, eu adipiscing libero sagittis nec. Fusce malesuada scelerisque venenatis. Aenean eget augue dui. Morbi a velit scelerisque felis venenatis sodales eu quis tellus. Fusce rutrum rutrum neque, ut placerat felis faucibus ac. </p>

                   <div class="img-text pull-left"><img alt='' src="http://placehold.it/210x210"></div> 

                    <p>Vestibulum fermentum eros sit amet dolor egestas condimentum. Donec facilisis blandit est, eget lobortis tellus tempus sed. Ut semper aliquam eros eleifend consequat. Morbi tincidunt nisi at ipsum ullamcorper placerat. Aliquam ligula massa, rhoncus id lobortis quis, ullamcorper nec enim. Vivamus molestie, enim ac porta rhoncus, ligula lorem tristique tortor, eu luctus justo urna vel ipsum. Proin ut urna id sapien vestibulum consectetur.  Scelerisque venenatis. Aenean eget augue dui. Morbi a velit scelerisque felis venenatis sodales eu quis tellus. Fusce rutrum rutrum neque, ut placerat felis faucibus ac. Vestibulum fermentum eros sit amet dolor egestas condimentum. </p>

                    <p>Donec facilisis blandit est, eget lobortis tellus tempus sed. Ut semper aliquam eros eleifend consequat. Morbi tincidunt nisi at ipsum ullamcorper placerat. Aliquam ligula massa, rhoncus id lobortis quis, ullamcorper nec enim.</p>
                    

                    <h4 class="text-style">Aenean enim felis, pulvinar sed venenatis sit amet. (h4)</h4>
                    
                    <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>

                    <ul class='style-one'> 
                        <li>Quisque ac porttitor massa.</li>
                        <li>Aliquam bibendum justo eu ipsum egestas vel pulvinar odio dignissim.</li>
                        <li>In eros sem, malesuada ut dictum eget, volutpat at sem. </li>
                        <li>Pellentesque porttitor suscipit laoreet.</li>
                    </ul>

                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nec erat arcu. Praesent ut nulla vitae turpis gravida placerat. Ut posuere, odio vel ultrices eleifend, massa metus eleifend lorem, ac condimentum leo massa quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                    <h5 class="text-style">Proin gravida dapibus metus, et pretium lorem accumsan suscipit. (h5)</h5>
                    <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>

                    <h6 class="text-style">Proin gravida dapibus metus, et pretium lorem accumsan suscipit. (h6)</h6>
                    <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>

                    <div class="share-box">
                        <p class="share-header">share</p>
                        <div class="addthis_toolbox addthis_default_style">
                            <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                            <a class="addthis_button_linkedin_counter"></a>
                            <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal" pi:pinit:url="http://www.addthis.com/features/pinterest" pi:pinit:media="http://www.addthis.com/cms-content/images/features/pinterest-lg.png"></a>
                            <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
                            <a class="addthis_button_tweet"></a>
                        </div>
                        
                    </div>

                    <h2>About author</h2>
                    <div class="author-info">
                        <div class="author-photo col-sm-3">
                            <img alt='' src="http://placehold.it/260x260">
                        </div>

                        <div class="col-sm-9 author-descript">
                            <p class="author-name">John Doe</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa.</p>
                        </div>

                    </div>

                    <h2>Comments</h2>

                          <div class='comment-wrap'>
                            <div class='image-holder'>
                              <img alt='' src='http://placehold.it/60x60'>
                            </div> 
                            <p class='name'>Jane MacFerson</p>
                            <p class='date'>June 28, 2013 at 14 a.m.</p>
                            <p class='message'>Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem.</p>

                            <a href="#" class="reply-btn"></a>
                          </div>

                          <div class='comment-wrap '>
                            <div class='image-holder'>
                              <img alt='' src='http://placehold.it/60x60'>
                            </div> 
                            <p class='name'>Sindy Taylor</p>
                            <p class='date'>June 28, 2013 at 14 a.m.</p>
                            <p class='message'>Nunc eget mauris quis nulla condimentum semper vitae et mauris. Donec vitae nisi eget arcu sagittis ultricies et vel mi. Sed condimentum condimentum sapien.</p>
                            <a href="#" class="reply-btn"></a>
                          </div>

                          <div class='comment-wrap'>
                            <div class='image-holder'>
                              <img alt='' src='http://placehold.it/60x60'>
                            </div> 
                            <p class='name'>Olivia Watson</p>
                            <p class='date'>June 28, 2013 at 14 a.m.</p>
                            <p class='message'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor elit id elit tristique ultrices bibendum ante tempor. Vivamus sapien mauris, tempor ut tempor sodales, egestas nec risus.</p>
                            <a href="#" class="reply-btn"></a>
                          </div>

                          <div class='comment-wrap comment-reply'>
                            <div class='image-holder comment-author'>
                              <img alt='' src='http://placehold.it/60x60'>
                            </div> 
                            <p class='name'>John Doe</p>
                            <p class='date'>June 28, 2013 at 14 a.m.</p>
                            <p class='message'>Nunc eget mauris quis nulla condimentum semper vitae et mauris. Donec vitae nisi eget arcu sagittis ultricies et vel mi. Sed condimentum condimentum sapien.</p>
                            <p class="author-indecate">Author</p>
                            <a href="#" class="reply-btn"></a>
                          </div>

                          <div class='comment-wrap last-comment'>
                            <div class='image-holder'>
                              <img alt='' src='http://placehold.it/60x60'>
                            </div> 
                            <p class='name'>Ted Johns</p>
                            <p class='date'>June 28, 2013 at 14 a.m.</p>
                            <p class='message'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor elit id elit tristique ultrices bibendum ante tempor. Vivamus sapien mauris, tempor ut tempor sodales, egestas nec risus.</p>
                            <a href="#" class="reply-btn"></a>
                          </div>

                          <h2>Leave a comment</h2>

                          <!-- contact form inputs-->
                            <form id="comment-form" novalidate="" name="contact-form" method="post" >
                                <div class="col-sm-4">
                                    <input type='text' placeholder='name'>
                                    <input type='email' placeholder='email'>
                                </div>
                                <div class="col-sm-8 comment-message">
                                    <textarea placeholder="comment"></textarea>
                                </div>
                                <button type="submit" class='btn btn-large btn-success btn-form icon-circled-right btn-animate pull-right'>submit</button>
                            </form><!-- end contact form inputs -->

                  </div>


                </div>

            <aside class="col-sm-4">
                <div class="sitebar">
                    <form id="search-form" method="get">
                        <input type="text" class="search-field" name="s" maxlength="120" placeholder='type your request'>
                        <div class="search-submit">
                            <input type="submit" class="search-submit-buttom" value=''>
                        </div>
                    </form>

                    <h2>categories</h2>
                    <ul class="style-five">
                        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                        <li><a href="#">Donec elementum lectus</a></li>
                        <li><a href="#">Nam suscipit nulla vitae leo</a></li>
                        <li><a href="#">Fusce ornare dapibus</a></li>
                        <li><a href="#">Duis tristique</a></li>
                    </ul>

                    <a href='#' class="popular-post">
                        <h6>popular post</h6>
                        <img alt='' src="http://placehold.it/480x480">
                        <p>Ut hendrerit cursus lectus, quis euismod risus</p>
                        <small class="date">May 28, 2013</small>
                    </a>

                    <h2>tags</h2>
                    <div>
                        <a href="#" class="tags-item">lorem ipsum</a>
                        <a href="#" class="tags-item">consectetur</a>
                        <a href="#" class="tags-item">gravida</a>
                        <a href="#" class="tags-item">adipiscing</a>
                        <a href="#" class="tags-item">nunc ante</a>
                        <a href="#" class="tags-item">dapibus nec</a>
                        <a href="#" class="tags-item">commodo nec</a>
                        <a href="#" class="tags-item">quis justo</a>
                        <a href="#" class="tags-item">lorem ipsum</a>
                        <a href="#" class="tags-item">consectetur</a>
                        <a href="#" class="tags-item">adipiscing</a>
                        <a href="#" class="tags-item">nunc ante</a>
                        <a href="#" class="tags-item">dapibus nec</a>
                        <a href="#" class="tags-item">commodo nec</a>
                        <a href="#" class="tags-item">quis justo</a>
                    </div>

                    <h2>accordion widget</h2>

                    <!-- Firts type accordion-->
                    <div class='accordion-first'>
                        <div class="panel-group" id="accordion">
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                  <div class="marker">
                                      <span class="custom1">+</span>
                                      <span class="custom2">-</span>
                                  </div>
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                </a>
                              </h4>
                            </div><!-- end panel heading-->
                            <div id="collapseOne" class="panel-collapse collapse in">
                              <div class="panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                              </div><!-- end panel-body-->
                            </div><!-- end collapse part-->
                          </div> <!-- end panel-->
                          
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class='collapsed'>
                                    <div class="marker">
                                      <span class="custom1">+</span>
                                      <span class="custom2">-</span>
                                   </div>
                                  Aenean sed neque rhoncus. 
                                </a>
                              </h4>
                            </div><!-- end panel heading-->
                            <div id="collapseTwo" class="panel-collapse collapse">
                              <div class="panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                              </div><!-- end panel-body-->
                            </div><!-- end collapse part-->
                          </div> <!-- end panel-->
                          
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class='collapsed'>
                                  <div class="marker">
                                      <span class="custom1">+</span>
                                      <span class="custom2">-</span>
                                  </div>
                                  Sed adipiscing vel felis et placerat.
                                </a>
                              </h4>
                            </div><!-- end panel heading-->
                            <div id="collapseThree" class="panel-collapse collapse">
                              <div class="panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque libero a ante viverra vel scelerisque orci tristique. Nullam nisl massa, ullamcorper id condimentum porta, cursus a lorem. 
                              </div><!-- end panel-body-->
                            </div><!-- end collapse part-->
                          </div> <!-- end panel-->

                        </div>
                    </div><!-- end first accordion-->

                    <h2>flickr stream</h2>
                    <ul id="flickr" class="flickr"></ul>

                    <h2>latest tweets</h2>
                    <div id="twitter-feed"></div>

                </div>
            </aside>
            
        </section>

        <footer class='footer'>
            <div class='container'>
                <div class='col-sm-8 col-md-8 col-lg-8'>
                    <h2>Contact info</h2>
                    <p class="footer-info">Vivamus vel lacus eu nunc vehicula ultricies vel vulputate dui. Mauris vehicula mollis mi. Quisque aliquam porta magna, at bibendum magna tempor eget. Donec consequat ipsum in nibh consequat id suscipit libero bibendum. Sed elementum imperdiet magna, convallis dapibus turpis ultricies eu.</p>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-location'></i>Address</h4>
                        <p>V101 West Street, New
                        <br/> 
                        York, NY 12345</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mail'></i>Email</h4>
                        <p>
                        appcorner@gmail.com
                        <br/> 
                        help@appcorner.com</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mobile'></i>Phone</h4>
                        <p>+ 44 1225 324 980
                        <br/> 
                        + 44 1225 324 980</p>
                    </div>
                   
                    <div class='col-sm-12 col-md-12 col-lg-12'>
                        <ul class='social-icon pull-left'>
                            <li><a href="#"><i class='icon-instagram'></i></a></li>
                            <li><a href="#"><i class='icon-dribbble'></i></a></li>
                            <li><a href="#"><i class='icon-tumblr'></i></a></li>
                            <li><a href="#"><i class='icon-linkedin'></i></a></li>
                            <li><a href="#"><i class='icon-pinterest'></i></a></li>
                            <li><a href="#"><i class='icon-googleplus'></i></a></li>
                            <li><a href="#"><i class='icon-facebook'></i></a></li>
                            <li><a href="#"><i class='icon-twitter'></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class='col-sm-4 col-md-4 col-lg-4 mobile-clear'>
                    <h2>Drop us a line</h2>
                    <!-- contact form inputs-->
                    <form id="contact-form" novalidate="" name="contact-form" method="post" >
                        <input type='email' name='user-email' placeholder='Email'>
                        <textarea name="user-message" placeholder="Message"></textarea>
                        <button type="submit" class='btn btn-large btn-success btn-form icon-circled-right btn-animate'>submit</button>
                    </form><!-- end contact form inputs -->
                </div>

                <div class='clearfix'></div>
                <div class='container devider'></div>

                <p class='copy'>© Appcorner, 2013. All rights reserved. Done by Olia Gozha</p>

            </div>
        </footer>
    </div>

    <!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <!-- Mobile navigation menu-->
        <script src="js/jquery.mobile.menu.js"></script>
        <!-- Event that will trigger when the element is scrolled in to the viewport.--> 
        <script type="text/javascript" src="js/jquery.inview.js"></script>
        <!-- Waypoint -->
        <script src="js/waypoints.min.js"></script>
        <!-- Form -->
        <script src="js/jquery.form.js"></script>

    <!-- Page specific scritpts-->
        <script src="js/jquery.form.js"></script>
        <!-- Flickr -->
        <script src="js/jflickrfeed.js"></script>
        <!-- Colorbox  (popup) -->
        <script src="js/jquery.colorbox.js"></script> 
        <!-- Twitter feeds -->
        <script type="text/javascript" src="js/twitterfeed.js"></script>
        <!-- Social share links. -->
        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
        <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-525fd5e9061e7ef0"></script>
        <!-- AddThis Button END -->


        <!-- Custom -->
        <script src="js/custom.js"></script>


        <script type="text/javascript">
            $(document).ready(function() {
                initSinglePost();
            });
        </script>

</body>